<template>
  <el-card>
    <el-row>
      <el-col :span="8">
        <el-input
          placeholder="输入书籍id"
          v-model="bookid"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-button icon="el-icon-search" @click="getTitle">搜索</el-button>
      </el-col>
    </el-row>

    <el-table :data="titleForm" border style="width: 100%">
      <el-table-column prop="_id" label="id" width="240">
        <template slot-scope="slot">
          <h4 @click="getContent(slot.row._id)">{{ slot.row._id }}</h4>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="章节名" width="220">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template slot-scope="slot">
          <el-button
            type="success"
            plain
            v-if="slot.row.state == 0"
            @click="feng(slot.row._id)"
            >正常，点击封禁</el-button
          >
          <el-button
            type="warning"
            plain
            v-if="slot.row.state == 1"
            @click="jie(slot.row._id)"
            >封禁中，点击解封</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="创建时间"
        width="240"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="slot">
          <el-button type="danger" @click="removeThisTitle(slot.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
    <span class="demonstration">共有{{isLength}}条记录</span>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      layout="prev, pager, next, jumper"
      :page-size="10"
      :total="isLength">
    </el-pagination>
  </div>
    <!-- 章节内容弹窗 -->
    <el-dialog
      title="章节内容"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <textarea v-model="iscontent"  rows="25"></textarea>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      dialogVisible:false,
      bookid: "",
      titleForm: [],
      iscontent:"",
      isLength:0,
      currentPage: 1,
      pageSize:10,
    };
  },
  methods: {
    async getTitle() {
      const { data: res } = await this.$http.post(
        `books/gettitlePage/${this.bookid}`,{pageSize:this.pageSize,currentPage:this.currentPage}
      );
      this.titleForm = res.data;
      this.isLength = res.num;
      //console.log(res.data);
    },
    async feng(id) {
      const {
        data: res,
      } = await this.$http.post(`/books/updateTitleState/${id}`, { state: 1 });
      if (res.status == 200) {
        this.$message.success("封禁成功");
        this.getTitle();
      } else {
        this.$message.error("封禁失败");
      }
    },
    async jie(id) {
      const {
        data: res,
      } = await this.$http.post(`/books/updateTitleState/${id}`, { state: 0 });
      if (res.status == 200) {
        this.$message.success("解禁成功");
        this.getTitle();
      } else {
        this.$message.error("解禁失败");
      }
    },
    async removeThisTitle(id) {
      const { data: res } = await this.$http.delete(`/books/deleteTitle/${id}`);
      if (res == "OK") {
        this.$message.success("删除成功");
        this.getTitle();
      } else {
        this.$message.error("删除失败");
      }
    },
    async getContent(id) {
        const {data:res} = await this.$http.get(`/books/getcontent/${id}`)
        if(res.status != 200){
            return this.$message.error("获取失败")
        }
        this.$message.success("获取成功");
        this.iscontent = res.data.content;
        this.dialogVisible = true;
    },
    handleCurrentChange(val){
        this.currentPage = val;
        this.getTitle();
    },
  },
};
</script>

<style lang="less" scoped>
h4:hover {
  color: blue;
  cursor: pointer;
}
textarea{
    width: 100%;
    font-size: 18px;
    resize: none;
}
</style>
